/**
 * Created by jiangqifan on 16/3/1.
 */
import React from 'react';
import ReactDOM from 'react-dom';
import FlatButton from '../../../node_modules/material-ui/lib/flat-button';
import injectTapEventPlugin from 'react-tap-event-plugin';
import FunctionKeys from './function_key.jsx';

import HttpRequest from './HttpRequest.js';
import Image from '../../../node_modules/react-bootstrap/lib/Image';
import BuildManageTab from './buildManagement/index.jsx';
import PublishManageTab from './publishManagement/index.jsx';
import ProjectManageTab from './projectManagement/index.jsx';
import OverlayTrigger from '../../../node_modules/react-bootstrap/lib/OverlayTrigger';
import Tooltip from '../../../node_modules/react-bootstrap/lib/Tooltip';
import ProjectListNav from './projectManagement/projectListNav.jsx';
import NewProjectDlg from "./projectManagement/newProjectDlg.jsx";
import Alert from "./alert.jsx";
import Confirm from "./confirm.jsx";


injectTapEventPlugin();

var locked = false;
let IndexPage = React.createClass({
    getInitialState: function () {
        return {
            activeTab: 0,
            content: null,
            current_project: "",
            current_user: ""
        }
    },
    componentWillMount: function () {

        HttpRequest.getCurrentUser().success(function (res) {
            if (res.code == 0) {
                HttpRequest.getCurrentProject(res.data.shortid).success(function (msg) {
                    if (msg.code == 0) {
                        if (msg.data && msg.data._id) {
                            this.setState({
                                current_user: res.data,
                                current_project: msg.data,
                                content: 'projectManage'
                            });
                        }
                        else {
                            toastr.warning(null, '没有项目，请先创建项目');
                            this.setState({
                                current_user: res.data
                            },this.noProjectAction);
                        }
                    } else {
                        //attention
                        console.log(msg);
                    }
                }.bind(this)).error(function (msg) {
                });
            } else {
                //attention
                console.log(res.message);
            }
        }.bind(this)).error(function (error) {
            //attention
            console.log(error);
        });


    },
    _getTabView(){
        let tabView = null;
        let index = this.state.activeTab;
        switch (index) {
            case 0:
                tabView = <ProjectManageTab project={this.state.current_project}/>;
                break;
            case 1:
                tabView = <BuildManageTab project={this.state.current_project}/>;
                break;
            case 2:
                tabView = <PublishManageTab project={this.state.current_project}/>;
                break;
        }
        //this.tabView = tabView;
        return tabView;
    },

    _handleTabSelect(selectedKey){
        switch (selectedKey) {
            case 0:
                this.setState({activeTab: 0});
                break;
            case 1:
                this.setState({activeTab: 1});
                break;
            case 2:
                this.setState({activeTab: 2});
                break;
        }
    },

    getCurrentProject(project){
        this.setState({
            current_project: project.data
        });
    },
    openNewProDlg: function () {
        this.refs['new_project_dialog'].handleOpen();
    },
    noProjectAction:function(){
        this.refs['new_project_dialog'].opeUncancelled();
    },
    newProject:function(newProjectInfo){
        this.setState({
            current_project: newProjectInfo.project
        });
    },
    openProjectList: function () {
        this.refs['project_list_nav'].handleToggle();
    },
    shiftSideBar:function(){
        var side_bar = document.getElementById("sidebar_lg");
        var side_barCss = window.getComputedStyle(side_bar,"");
        var state = (side_barCss.visibility == "hidden")?false:true; //true:lg false:small
        if(locked){
            this.setState({
                state:""
            },this.render);
        }else{
            this.setState({
                state:state?"sma":"lg"
            },this.render);
        }
        locked = !locked;
    },
    render() {
        const avatar = this.state.current_user.avatar_src;
        return (
            <div id="body">
                <Alert />
                <Confirm />
                <div id="sidebar_lg" className={"sidebar_lg " + (this.state.state)}>
                    <div className="side_tab_logo" style={{cursor:"pointer"}} onClick={this.shiftSideBar}>
                        <div style={{textAlign:"center"}}>
                            <img src="/res/image/logo_bj.png" style={{marginLeft: "23px"}}/>
                            <img src="/res/image/logo.png" style={{marginTop: "-140px"}}/>
                        </div>
                        <div style={{textAlign:"center",marginTop: "-20px",borderTop:"1px solid black",borderBottom:"1px solid black",background: "#000000"}}
                             >
                            <img src="/res/image/slide.png" />
                        </div>
                    </div>
                    <div className={"side_tab "+ (this.state.activeTab==0?"side_tab_active":"")}
                         onClick={this._handleTabSelect.bind(this, 0)}>
                        <div className={"masking " + (this.state.state)}>
                            <div style={{width:"213px"}}>
                                <img src="/res/image/l_d.png"
                                     style={{position:"absolute",left:"75px",marginTop:"13px"}}/>
                                <img src="/res/image/projectManage.png" style={{position:"absolute",left:"75px"}}/>

                                <div className='side_tab_name'
                                     style={{position:"absolute",left:"75px",marginTop:"76px"}}>项目管理
                                </div>
                            </div>
                            <div className={"triangle_border_right "+ (this.state.state)}>
                                <span></span>
                            </div>
                        </div>

                    </div>

                    <div className={"side_tab "+ (this.state.activeTab==1?"side_tab_active":"")}
                         onClick={this._handleTabSelect.bind(this, 1)}>
                        <div className={"masking "+ (this.state.state)}>

                            <div style={{width:"213px"}}>
                                <img src="/res/image/l_d.png"
                                     style={{position:"absolute",left:"75px",marginTop:"13px"}}/>
                                <img src="/res/image/buildManage.png" style={{position:"absolute",left:"75px"}}/>

                                <div className='side_tab_name'
                                     style={{position:"absolute",left:"75px",marginTop:"76px"}}>构建管理
                                </div>
                            </div>
                            <div className={"triangle_border_right "+ (this.state.state)}>
                                <span></span>
                            </div>

                        </div>

                    </div>
                    <div className={"side_tab "+ (this.state.activeTab==2?"side_tab_active":"")}
                         onClick={this._handleTabSelect.bind(this, 2)}>
                        <div className={"masking "+ (this.state.state)}>
                            <div style={{width:"213px"}}>
                                <img src="/res/image/l_d.png"
                                     style={{position:"absolute",left:"75px",marginTop:"13px"}}/>
                                <img src="/res/image/publishManage.png" style={{position:"absolute",left:"75px"}}/>

                                <div className='side_tab_name'
                                     style={{position:"absolute",left:"75px",marginTop:"76px"}}>发布管理
                                </div>
                            </div>
                            <div className={"triangle_border_right "+ (this.state.state)}>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div className={"sidebar_sma " + (this.state.state)}>

                    <div style={{paddingTop:"47px",textAlign:"center",height:"122px",cursor: 'pointer'}} onClick={this.shiftSideBar}>
                        <img src="/res/image/logo_small.png" style={{position: "absolute",top: "47px",left: "16.5px"}}/>
                    </div>
                    <div style={{cursor:"pointer",textAlign:"center",borderTop:"1px solid black",borderBottom:"1px solid black",background: "#000000"}}
                         onClick={this.shiftSideBar}>
                        <img src="/res/image/slide.png" />
                    </div>

                    <div title="项目管理" className={"side_tab "+ (this.state.activeTab==0?"side_tab_active":"")}
                         onClick={this._handleTabSelect.bind(this, 0)}>
                        <div className={"masking "+ (this.state.state)}>
                            <div style={{width:"213px"}}>

                                <img src="/res/image/l_d_s.png"
                                     style={{position:"absolute",left:"9px",marginTop:"14px"}}/>
                                <img src="/res/image/projectManage.png" style={{position:"absolute",left:"8px"}}/>

                            </div>
                        </div>
                    </div>

                    <div title="构建管理" className={"side_tab "+ (this.state.activeTab==1?"side_tab_active":"")}
                         onClick={this._handleTabSelect.bind(this, 1)}>
                        <div className={"masking "+ (this.state.state)}>
                            <div style={{width:"213px"}}>

                                <img src="/res/image/l_d_s.png"
                                     style={{position:"absolute",left:"9px",marginTop:"14px"}}/>
                                <img src="/res/image/buildManage.png" style={{position:"absolute",left:"8px"}}/>

                            </div>
                        </div>
                    </div>
                    <div title="发布管理" className={"side_tab "+ (this.state.activeTab==2?"side_tab_active":"")}
                         onClick={this._handleTabSelect.bind(this, 2)}>
                        <div className={"masking "+ (this.state.state)}>
                            <div style={{width:"213px"}}>

                                <img src="/res/image/l_d_s.png"
                                     style={{position:"absolute",left:"9px",marginTop:"14px"}}/>
                                <img src="/res/image/publishManage.png" style={{position:"absolute",left:"8px"}}/>

                            </div>
                        </div>
                    </div>
                </div>


                <div className={"content "+ (this.state.state)}>
                    <div id="content_head" style={{ height:"114px",width:'100%'}}>
                        <div style={{float:"left",margin:"18px 0 0 0",borderRadius: "50%",border: "4px solid #ddd"}}>
                            <Image src={avatar} circle width="70px" height="70px"/>
                        </div>
                        <div
                            style={{marginLeft: "80px",paddingTop: "28px",fontFamily:'Microsoft YaHei'}}>
                            <div style={{color: "#383d43"}}>
                                    <span
                                        style={{marginLeft: "30px",fontSize: "14px"}}>欢迎{this.state.current_user.nick_name}!&nbsp;
                                        <a target="_Blank"
                                           style={{color: "#df7e00",textDecoration: "underline"}}
                                           href="http://user.beecode.cn">
                                            个人中心
                                        </a>&nbsp;
                                        当前项目：{this.state.current_project.namespace + '/' + this.state.current_project.name}</span>
                                <a style={{float: "right",fontSize: "16px",color: "#383d43"}}>帮助</a>
                                <a style={{marginRight: "10px",float: "right",fontSize: "16px",color: "#383d43"}} href="/project_manage">管理</a>
                                <a style={{marginRight: "10px",float: "right",fontSize: "16px",color: "#383d43"}} href="/session">退出</a>
                            </div>
                            <hr style={{marginTop:"5px", marginLeft:"30px",borderTop: "1px solid #9d9d9d",marginBottom: "14px"}}/>
                            <div onClick={this.openProjectList}
                                 style={{cursor:"pointer",width: "120px",height: "28px",fontSize:"16px",background:"#303c40",borderRadius:'2px',marginLeft:"30px",float:"right",textAlign: "center" }}>
                                <img src="/res/image/list1.png"
                                     style={{marginTop:"-2px",marginRight: "5px",lineHeight: "28px"}}/>
                                <span style={{marginLeft:"5px",color:"white",letterSpacing:"10px",lineHeight: "28px"}}>列表</span>
                            </div>

                            <div onClick={this.openNewProDlg}
                                 style={{cursor:"pointer",width: "120px",height: "28px",fontSize:"16px",background:"#303c40",borderRadius:'2px',marginLeft:"30px",float:"right",textAlign: "center" }}>
                                <img src="/res/image/xinjian.png"
                                     style={{marginTop:"-2px",marginRight: "5px",lineHeight: "28px"}}/>
                                <span style={{marginLeft:"5px",color:"white",letterSpacing:"10px",lineHeight: "28px"}}>新建</span>
                            </div>
                        </div>
                        <NewProjectDlg ref="new_project_dialog" newProjectComplete = {this.newProject}/>
                        <ProjectListNav ref="project_list_nav" callbackParent={this.getCurrentProject}/>
                    </div>
                    <div className="sdp_content">
                        {this._getTabView()}
                    </div>
                </div>
            </div>

        )
    }
});

ReactDOM.render(<IndexPage/>, document.getElementById('world'));
